<template>
	<view class="game">
		<view class="navbar" :style="navbarStyle">
			<navigator url="/pages/index/index" open-type="reLaunch">
				<image class="back" src="../../static/img/home.png"/>
			</navigator>
		</view>
		<view class="game-id">id: {{dUId}}</view>
		<eval-cover :data="info" :typeId="typeId" :list="list" :barHeight="barHeight"></eval-cover>
		<button open-type="share" data-channel="video">
			<image class="douyin" src="../../static/img/camera_douyin.png">
		</button>
		<!-- <view class="layer1-popup" v-if="layerPopup">
			<view class="layer1-container">
				<view class="layer1-wrapper">
						<view class="box">
							<view class="box_main" v-for="(item, index) in moreList" :key="index">
								<view class="box_body">
									<view class="pic">
										<image :src="item.image" />
									</view>
									<view class="right">
										<view class="body_txt1">{{item.name}}</view>
										<view class="body_txt2">一个人的身体质量指数到底有多少呢</view>
										<view class="body_btn txt">立即测试</view>
									</view>
								</view>
							</view>
							<view style="height: 50px;"></view>
						</view>
						<view class="layer1_header">
							<view class="box_btn" @click="more">查看更多</view>
						</view>
				</view>
				<view class="close-btn" @click="closeClick">
					<image src="https://fcdn.qiushilaile.com/adx/qualificationMaterials-62891610935512639.jpg" />
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import EvalCover from 'components/EvalCover'
	let tuiwa = require("../../tuiwa.js")
	export default {
		components: {
			EvalCover
		},
		data() {
			return {
				barHeight: 0,
				id: '',
				dUId:'',
				typeId: '',
				list: '',
				moreList: [{name: '身体质量指数BMI1', image: 'https://fcdn.qiushilaile.com/tuiwa/tuiwa-82681626781012525.jpg'},{name: '身体质量指数BMI2', image: 'https://fcdn.qiushilaile.com/tuiwa/tuiwa-82681626781012525.jpg'},{name: '身体质量指数BMI3', image: 'https://fcdn.qiushilaile.com/tuiwa/tuiwa-82681626781012525.jpg'},{name: '身体质量指数BMI4', image: 'https://fcdn.qiushilaile.com/tuiwa/tuiwa-82681626781012525.jpg'},{name: '身体质量指数BMI5', image: 'https://fcdn.qiushilaile.com/tuiwa/tuiwa-82681626781012525.jpg'},],
				info: {},
				layerPopup: false,
				type: 1 // 1. 测评游戏
			}
		},
		methods: {
			async get_xingshi_list() {
				await uni.request({
					url: 'https://vs.tuiwa.com/job_feign/get_xingshi_list',
					method: 'POST',
					success: res => {
						console.log(res.data.data);
						this.list = res.data.data;
					}
				});
			},
			async fetch() {
				const app = getApp().globalData
				const result = await this.request({
					url: '/GetTest.ashx',
					loading: true,
					data: {
						id: this.id,
						typeId: this.typeId,
					}
				})
				console.log('1111111111111111111', result.typeId);
				this.info = result
				this.typeId=result.typeId
				if(this.typeId=="16" || this.typeId=="23"){
					console.log("typeId==",this.typeId)
					this.get_xingshi_list()
				}
				
				console.log("result", this.info)
				app.gameInfo = result
			},
			async getList() {
				// console.log(this.id);
				let params = {
					c: 0,
					pidx: 0,
					appId: 'ttb2dfc4622de58bd4',
					recommended: '1',
					goodsId: this.id
				};
				await this.request({
					url: '/GetList.ashx', 
					data: params
				}).then(res => {
					console.log(res);
					// this.list = res;
				})
			},
			closeClick() {
        this.layerPopup = false;
    	},
		},
		computed: {
			navbarStyle() {
				return `height: ${40 + this.barHeight}px; padding-top: ${this.barHeight}px`
			}
		},
		onLoad(options) {
			if(options.shareUserId != '' && options.shareUserId!= undefined ){
					tt.setStorageSync("options",options)
			}
			
			if(options.bindFlag == 1 && options.wxId != '' ){
					tt.setStorageSync("options",options)
			}
			const {
				barHeight
			} = getApp().globalData
			this.barHeight = barHeight
			console.log("start===", JSON.stringify(options))
			this.typeId = options.typeId
			console.log(this.typeId);
			if (options.goodsId) {
				this.id = +options.goodsId
				tt.setStorageSync("g_id",this.id)
			} else if (options.id) {
				this.id = +options.id
				tt.setStorageSync("g_id",this.id)
				console.log(this.id)
			} else {
				uni.navigateTo({
					url:"../index/index"
				})
			}
			
			this.fetch()
			tuiwa.bindDyWx().then(res=>{
				if(tt.getStorageSync('dyUser')&&tt.getStorageSync('dyUser').phone){
					this.dUId=tt.getStorageSync('dyUser').phone
				}
			}).catch(err=>{
				console.log("err==",err)
			})

		},
		onShow() {
			this.getList();
			this.layerPopup = true
			// console.log('onShow', this.layerPopup ? "弹窗" : "不弹窗");
		},
		onReady() {
			this.layerPopup = false
			// console.log('onReady', this.layerPopup ? "弹窗" : "不弹窗");
		},
		onShareAppMessage(res) {
			var data = getApp().globalData
			var dyUser=tt.getStorageSync('dyUser')
			var path=""
			if(dyUser&&dyUser.uid){
				path=`/pages/start/start?goodsId=` + this.id +
								"&shareUserId=" + tt.getStorageSync('dyUser').uid + 
								"&mId=" + tt.getStorageSync('dyUser').id
			}else{
				path=`/pages/start/start?goodsId=` + this.id
			}
			console.log("path==",path)
			return {
				title: this.info.Title, //分享的标题
				desc: this.info.Title, // 分享的内容3
				path: path, // 分享的路径
			}
		}
	}
</script>

<style lang="scss" scoped>
	.game {
		position: relative;
		min-width: 100vw;
		min-height: 100vh;

		&-id {
			background-color: #FFFFFF;
			position: absolute;
			bottom: 20rpx;
			left: 40rpx;
			z-index: 2;
			background-color: transparent;
			color: #FFFFFF;
		}
	}

	.navbar {
		position: fixed;
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		z-index: 5;
	}

	.douyin {
		position: fixed;
		right: 0rpx;
		top: 150rpx;
		width: 104rpx;
		height: 91rpx;
		z-index: 5;
	}

	.back {
		width: 60rpx;
		height: 60rpx;
		margin-left: 20rpx;
	}

	.layer1-popup {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 999;
	}

	.layer1-container {
    width: 601rpx;
    height: 1021rpx;
    border: 30rpx;
    background: url(http://fcdn.qiushilaile.com/game/default-19861632813647097.png) no-repeat;
		background-size: 100% 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	}

	.layer1-wrapper {
		height: 100%;
    // margin: 40rpx;
		position: relative;
	}

	.layer1_header {
    width: 100%;
		height: 85px;
		position: fixed;
    bottom: 0;
    background: url(http://fcdn.qiushilaile.com/game/default-351632813754192.png) no-repeat;
		background-size: 100% 100%;
	}

	.box {
    width: 509rpx;
    height: 628rpx;
    // background: #fff;
    // margin-top: 30rpx;
    position: absolute;
    bottom: -25%;
    left: 50%;
    transform: translate(-50%, -50%);
		overflow: scroll;
	}

	.box_main {
    // height: 509rpx;
		box-shadow: 0 9rpx 10rpx 0 rgba(102, 99, 248, 0.48);
		border-radius: 10rpx;
    background-color: #fff;
	}

	.box_body {
    height: 132rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 25rpx 10rpx;
	}

	.pic {
    width: 100rpx;
    height: 100rpx;
    border-radius: 10rpx;
    background-color: cornflowerblue;
    margin: auto 10rpx;
	}
	.pic image {
		width: 100%;
		height: 100%;
		display: block;
		border-radius: 10rpx;
	}

	.right {
    width: 360rpx;
	}

	.body_txt1 {
    font-size: 30rpx;
    font-weight: bolder;
		color: #771BC2;
	}

	.body_txt2 {
    width: 220rpx;
    font-size: 22rpx;
    color: #bbb;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	}

	.body_btn {
    width: 118rpx;
    height: 33rpx;
    line-height: 33rpx;
    font-size: 24rpx;
    float: right;
    color: #fff;
    margin-top: 20rpx;
		background: #AB45FF;
		box-shadow: 0 4rpx 6rpx 0 rgba(153, 115, 244, 0.99);
		border-radius: 15rpx;
		text-align: center;
	}

	.box_btn {
    width: 504rpx;
		height: 77rpx;
		line-height: 77rpx;
		background: linear-gradient(117deg, #BE7EF1, #5B60F9);
		box-shadow: 0px 6rpx 27rpx 0px rgba(32, 36, 161, 0.27);
		border-radius: 39rpx;
		font-size: 34rpx;
		font-weight: bolder;
		letter-spacing: 4rpx;
		color: #fff;
		text-align: center;
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
	}

	.close-btn {
    width: 60rpx;
    height: 60rpx;
    position: absolute;
    bottom: -150rpx;
    left: 50%;
    transform: translate(-50%, -50%);
    /* background: red; */
	}

	.close-btn image {
    width: 100%;
    height: 100%;
    display: block;
	}
</style>
